<template>
  
  <div class="topform">
    <div class="bottomtext"><i class="el-icon-warning"></i><span>初始查询提供30天内的订单消息</span></div>
  <el-form ref="form" :model="form" label-width="80px" >
    <el-form-item label="行程选择">
      <el-col :span="11">
      <city-picker size="medium"
          :cityList="cityListArr"
          placeholder="出发城市"
          v-model:currCityName="leaveCity">
          </city-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
      <city-picker  size="medium"
          :cityList="cityListArr"
          placeholder="到达城市"
          v-model:currCityName="arriveCity"></city-picker>
      </el-col>
    </el-form-item>

    <el-form-item label="出行日期">
      <el-col :span="10">
      <date-picker size="medium" placeholder="选择日期"></date-picker>
      </el-col>
    </el-form-item> 
    <el-form-item> 
    <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item> 
  </el-form>
  </div>

</template>

<script>
import CityPicker from '@/components/MainArea/components/CityPicker.vue';
import DatePicker from '@/components/MainArea/components/DatePicker.vue';
  export default {
    
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    components:{CityPicker,DatePicker},
  }
</script>

<style lang='scss' scoped>
.topform{
  margin-top: 40px;
  padding-top:30px;
  height: 230px;
  padding-left: 120px;
  background-color:rgb(255,255,255);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.bottomtext{
  height: 40px;
  line-height: 40px;
  color: grey;
  padding-left: 0px;
  margin-left: 0px;
}
.el-button{
  margin-left: 250px;  
}
</style>
